<template>
  <div>
  <searchBar type='3'title='网易严选' />
    <div class="logo">
      <img src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png">
    </div>
    <div class="containerWrap">
      <div class="container">
        <div class="iptWrap">
          <input class="ipt" data-placeholder="邮箱帐号" name="email" data-type="email" data-loginname="loginEmail" data-required="true" type="text" autocomplete="off" tabindex="1" spellcheck="false" placeholder="邮箱帐号">
        </div>
        <div class="iptWrap">
          <input class="ipt" data-placeholder="密码" name="password" maxlength="50" data-required="true" type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" placeholder="密码">
        </div>
        <p>
          <span class="left">注册账号</span>
          <span class="right">忘记密码</span>
          <button id="login">登录</button>
        </p>
        <div class="other" @click="toLogin">
          其他方式登录>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'EmailLogin',
    methods:{
      toLogin(){
        this.$router.push('/login')
      }
    }
  }
</script>

<style lang="less" scoped>
  .logo{
    text-align: center;
    margin-top: .56rem;
    margin-bottom: 0;
    img{
        width: 2.68rem;
        height: .9rem;
    }
  }
  .container{
    position: relative;
    padding-bottom: 1.2rem;
    margin: 0 auto;
    padding-top: 1.6rem;
    .iptWrap{
      margin-left: .86rem;
      width: 8.27rem;
      height: 44px;
      border-bottom:1px solid rgb(228, 218, 218);
      .ipt{
        width: 8.27rem;
        height: 0.6rem;
        font-size: 0.4rem;
        line-height: 0.6rem;
        margin: 0.39rem 0;
        padding-left: 0;
        -webkit-tap-highlight-color: transparent;
        letter-spacing: normal;
        color: #333;
        border: 0;
        background: #fff;
        font-size: 12px;
      }
    }
    p{
      font-size: 12px;
      color: #333;
      margin: 0.39rem .86rem;
      .left{
        float: left;
        padding: 0 0 30px 0;
      }
      .right{
        float: right;
      }
    }
    #login{
      width: 8.27rem;
      height: 1.28rem;
      font-size: 0.4rem;
      border-radius: 3px;
      color: #fff;
      background: #DD1A21;
      text-indent: 0;
      text-align: center;
      display: block;
      border: none;
    }
    .other{
      font-size: 12px;
      margin-top: .96rem;
      margin-left: 38%;
    }
  }
</style>